<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        .illegal-pwd{
            border: red 1px solid !important;
            box-shadow: 0 0 5px red;
        }
    </style>
    <script src="JS/JS.js"></script>
</head>
<body>


<h1>登录</h1>
<!--form表单：用于登录

一般用post/get

action：表单提交的位置；网站/请求处理的地址
method: post;get ;提交方式
get:可以在url里面找到信息，不安全
post：不能，安全，能传输大文件
-->


    <form  method="post"  action="1.网页.html">


<!--文本输入框：

type:text
name:表单名字；
value:初始值
maxlength:最长字符数
size:初始大小。
-->


    <p>名字 <input  id="aaa" type="text" name="username" maxlength="10" size="30" placeholder="输入用户名" oninput="console.info('在输入文本')" required/> </p>
<!--密码框：type:password-->

    <p>密码 <input type="password" name="pwd" id="pwd" oninput="checkIllegal(this)"/></p>

<!--    单选框radio：名字一样的是同一种属性，只能有一个
        input type="radio";
        value:单选框选中的值
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" >男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--

        多选框：checkbox
    -->
    <p>
        <input type="checkbox" value="sleep" name=hobby>睡觉
        <input type="checkbox" value="play" name=hobby>玩游戏
        <input type="checkbox" value="read" name=hobby>读书
    </p>
        <!-- 按钮：button，image-->
    <p>按钮：
        <input type="button" name="btn1" value="没用">
<!--        <input type="image" src="../resources/image/1.jpg" width="600" height="400">-->
    </p>


         <!--
        下拉框：select
        选项：option
        -->
    <p>国家：
        <select name="列表名">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="uk">英国</option>
        <option value="india">印度</option>
        </select>
    </p>
    <p>文本框：
<!--        cols：长；rows:宽-->
        <textarea name="textarea" id="1" cols="40" rows="10">文本内容</textarea>

    </p>

    <p>
        文件域：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
   </p>

        <p>邮箱
            <input type="email" name="email">
        </p>

        <p>url
            <input type="url" name="url">
        </p>


<!--        tupe=number
            step: 步长
            max;min
            -->
        <p>数字
            <input type="number" name="num" step="10" max="100" min="10">
        </p>

<!--        input=range-->
        <p>滑块
            <input type="range" name="voice" min="0" max="100" step="2" value="100">

        </p>


        <p><!--    submit：提交
        reset：重置
        -->
            <input type="submit">
            <input type="reset" value="清空表单">
        </p>

        <p>搜索
            <input type="search" name="search" >
        </p>

    </form>
<!--隐藏域hidden
    只读readonly
    禁用disabled
    表单验证：
    placeholder:提示信息
    required：非空判断
    pattern：正则表达式；在网上搜
    -->



</body>
</html>